<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div{
		width: 200px;
		height: 200px;
		background-color: red;
		float: left;
		margin: 10px;
		opacity: .3;/*其他*/
		filter: alpha(opacity:30);/*IE*/
	}
	</style>
	<script type="text/javascript">
	window.onload=function()
	{
		var oDiv=document.getElementsByTagName('div');

		for (var i=0;i<oDiv.length ;i++) 
		{
			//oDiv[i].timer=null;
			//怎么会想到timer呢，这里设置的是透明度啊
			oDiv[i].alpha=30;
			oDiv[i].onmouseover=function()
			{
				startMove(this,100);
			}
			;
			oDiv[i].onmouseout=function()
			{
				startMove(this,30);
			}
			;
		}
	}
	//var alpha=30;//在js中公用的属性，得特别注意
	/*解释：
	当鼠标在第一个div上的，定时器开始执行，这时
	我迅速的把鼠标移到第二div上；
	假如第一个div是慢慢变大的++
	但快速移入第二个div时，在第一个div上的alpha还没满足条件时，
	就又要为第二个div加上alpha属性，
	就会形成alpha来回变。	
	*/
	function startMove(obj,iTarget){

		clearInterval(obj.timer);
		obj.timer=setInterval(function(){
			/*  
			if(iTarget<alpha)
			{
				speed=-10;
			}
			else
			{
				speed=10;
			}
			*/
			var speed=(iTarget -obj.alpha)/6;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);

			if (obj.alpha==iTarget)
			{
				clearInterval(obj.timer);
			}
			else
			{
				obj.alpha+=speed;
				obj.style.opacity=obj.alpha/100;
				obj.style.filter='alpha(opacity:'+obj.alpha+')';
			}
		},30)
	}
	</script>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>